<!doctype html>
<html>
    <head>
        <title>{% if page_title %}{{page_title}}{% else %}Hedy{% endif %}</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&display=swap">
        <link rel="stylesheet" href="{{static(generated_css_file)}}">
        <link rel="stylesheet" href="{{static('/css/additional.css')}}">
        <link rel="shortcut icon" type="image/png" href="{{static('/images/Hedy-logo.png')}}"/>
        <link rel="stylesheet" href="{{static('/fontawesome/css/all.min.css')}}"/>
    </head>
    <body dir="{{ g.dir }}">
        <div class="container min-w-min mx-auto bg-gray-100 min-h-screen shadow-md flex flex-col">
            <div id="cheatsheet_header" class="bg-blue-500 h-32 flex flex-row items-center">
                <h1 class="text-white text-5xl font-light font-serif mx-16">{{_('cheatsheet_title')}}</h1>
                <img src="{{static('/images/Hedy-logo.png')}}" class="z-10 w-40 ltr:ml-auto rtl:mr-auto ltr:mr-24 rtl:ml-24 mt-28" alt="{{_('hedy_logo_alt')}}">
            </div>
            <div id="cheatsheet_body" class="bg-blue-200 min-h-screen px-16 py-8">
                <h2 class="text-black text-4xl font-sans font-light mb-8">Level {{ level }}</h2>
                <div class="bg-white w-full h-auto shadow-md px-12 py-4 text-lg">
                    {% for command in commands %}
                        <div class="flex flex-col gap-2 my-4 pb-4 border-b-2 border-gray-500">
                            <h2 class="my-0 py-0">{{ command.name }}</h2>
                            <div>
                                {{ command.explanation|commonmark }}
                            </div>
                            <div class="turn-pre-into-ace">
                                <pre class="cheatsheet" level="{{ level }}">{{ command.demo_code }}</pre>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>        
        <script src="{{static('/vendor/jquery.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
        <script src="{{static('/vendor/htmx-2.0.3.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
        <script src="{{static('/vendor/hyperscript-0.9.8.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
        <script src="{{static('/js/appbundle.js')}}" type="text/javascript" crossorigin="anonymous"></script>
        <script>
            hedyApp.initialize({
                lang: '{{ g.lang }}',
                level: {{ level }},
                keyword_language: "{{ g.keyword_lang }}"
            });
        </script>
    </body>
</html>
